<template>
  <div class="loginForm">
    <!--svg-->
    <div class="wml" @click="changeToPhoneLogin">
      <svg width="72" height="72" viewBox="0 0 72 72" fill="none"
           xmlns="http://www.w3.org/2000/svg">
        <mask id="mask0_13457_29475" maskUnits="userSpaceOnUse" x="0" y="0" width="72" height="72"
              style="mask-type: alpha;">
          <path d="M0 0H64C68.4183 0 72 3.58172 72 8V72L0 0Z" fill="white"></path>
        </mask>
        <g mask="url(#mask0_13457_29475)">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M22 10C20.3431 10 19 11.3431 19 13V38C19 39.6569 20.3431 41 22 41H37V48H29V51H53V48H46V41H59C60.6569 41 62 39.6569 62 38V13C62 11.3431 60.6569 10 59 10H22ZM23 12C21.8954 12 21 12.8954 21 14V37C21 38.1046 21.8954 39 23 39H58C59.1046 39 60 38.1046 60 37V14C60 12.8954 59.1046 12 58 12H23ZM57 15H24V36H57V15Z"
                fill="#7BA3FF"></path>
        </g>
      </svg>
      <el-text>
        手机号登录
      </el-text>
    </div>
    <el-text class="wel-title">
      扫码登录
    </el-text>
    <!--已登录显示-->
    <div class="has-login" v-if="isExist">
      <el-avatar :size="100" :src="avatar">
        扫码登录
      </el-avatar>
      <el-text class="username">
        {{ username }}
      </el-text>
      <el-button type="primary" class="submit-btn" @click="toHome">
        立即登录
      </el-button>
      <el-link
        type="primary"
        underline="never"
        class="re-scan"
        @click="reScan">
        重新扫码
      </el-link>
    </div>
    <div class="un-login" v-else>
      <el-text class="tips">
        请打开
        <el-link type="primary" underline="never" style="position: relative;top: -3px">
          喵喵记账App
        </el-link>
        扫一扫登录
      </el-text>
      <!--二维码-->
      <el-image src="/qrcode.jpg"
                fit="cover"
                class="qr-code">
      </el-image>
      <el-text class="tips2">
        仅需一次登录,即可快速管理财务信息
      </el-text>
    </div>
  </div>
</template>

<script setup lang="ts">

import {useTokenStore} from "@/stores/useTokenStore.ts";
import {storeToRefs} from "pinia";
import {useRouter} from "vue-router";
import {ElNotification} from "element-plus";
import { defineEmits } from "vue";


const emit = defineEmits(["change-type","register"])
//切换到二维码登录
function changeToPhoneLogin() {
  emit('change-type', 1)
}


// 正确使用 Pinia store
const tokenStore = useTokenStore()
const {isExist, username, avatar} = storeToRefs(tokenStore)
const {clearToken} = tokenStore;

//重新扫码
function reScan() {
  //清除本地token
  clearToken()
  //todo 获取新的登录二维码

}
const router = useRouter()
//已登录状态下直接登录
function toHome() {
  if (!isExist)
    return
  router.push('/')
  //弹出提示
  ElNotification.success({
    title: 'Hi~',
    message: `${username.value}欢迎回来`,
    duration: 2000
  })
}
</script>

<style scoped lang="scss">
.loginForm {
  text-align: center;

  .wml {
    cursor: pointer;
    height: 72px;
    position: absolute;
    right: 0;
    top: 0;
    width: 72px;
    z-index: 2;

    .el-text {
      position: absolute;
      padding: 6px 8px;
      right: 72px;
      top: 10px;
      background-color: #4573f6;
      color: #fff;
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
      border-radius: 2px;
      opacity: 0;

      // 新增箭头样式
      &::after {
        content: "";
        position: absolute;
        right: -8px; // 从文字框右侧伸出
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 0 6px 8px; // 控制箭头大小和方向
        border-color: transparent transparent transparent #4573f6; // 箭头颜色与背景一致
      }
    }

    &:hover .el-text {
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }
  }


  //标题
  .wel-title {
    margin: 24px 0 30px;
    padding: 0;
    display: block;
    font-size: 24px;
    color: #21293a;
    font-weight: 500;
  }


  //已登录状态
  .has-login {
    display: flex;
    flex-direction: column;
    align-items: center;


    //头像展示区
    .el-avatar {
      width: 100px;
      height: 100px;
    }

    //用户名显示
    .username {
      margin: 24px 0 60px;
      color: #333;
      font-size: 16px;
      font-weight: 500;
    }


    //登录按钮
    .submit-btn {
      font-size: 20px;
      width: 300px;
      height: 48px;
      background-color: #3370ff;
    }

    .re-scan {
      margin: 20px 0;
      font-size: 14px;
    }

  }


  //未登录状态显示
  .un-login {
    display: flex;
    flex-direction: column;
    align-items: center;

    .tips {
      margin-bottom: 20px;
      font-size: 14px;
      color: #333;
    }

    .el-image {
      margin: 20px 0 20px;
      width: 220px;
      height: 220px;
    }

    .tips2 {
      width: 300px;
      height: 32px;
      line-height: 32px;
      color: #81858a;
      border-radius: 15px;
      background-color: #f5f5f5;
    }
  }
}

</style>
